<template>
  <div class="xtx-home-page">
    <div class="container">
      <home-category />
      <!-- 轮播 -->
      <xtx-carousel :sliders="sliders" />
    </div>
    <!-- 新鲜好物 -->
    <home-new></home-new>
    <!-- 推荐人气 -->
    <home-hot></home-hot>
  </div>
</template>

<script>
// 因为是全局的所以不用导入
// import XtxCarousel from '@/components/library/xtx-carousel.vue'
import homeCategory from './components/home-category.vue'
import homeNew from './components/home-new.vue'
import { reactive } from 'vue-demi'
import { findBanner } from '@/api/home'
import HomeHot from './components/home-hot.vue'
export default {
  components: { homeCategory, homeNew, HomeHot },
  name: 'xtx-home-page',
  setup () {
    const sliders = reactive([])
    findBanner().then(res => {
      sliders.push(...res.result)
    })
    return {
      sliders
    }
  }
}
</script>

<style scoped lang="less"></style>
